<template>
  <div class="administration mg0auto w80 mgt30p white">
    <div id="menu" class="bc2">
      <ul class="lsnone pbm0">
        <li
          v-for="(item, index) in state.menuList"
          :key="index"
          :class="[
            'm-item',
            'lsnone',
            'pbm0',
            item.en === state.currentMenu ? 'bc1' : 'bc2',
          ]"
          @click="fnChangeMenu(item.en)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div id="content" class="w100 border-none">
      <keep-alive>
        <component
          v-bind:is="currenContent"
          @addquestion-dialog="fnAddQuestionBox"
          @view-question="fnViewQuestionBox"
        ></component>
      </keep-alive>
    </div>
  </div>
  <AddQuestion v-show="state.AddQuestionBox" @close-box="fnAddQuestionBox" />
  <QuestionDetail
    v-show="state.questionDetail"
    @close-box="fnViewQuestionBox"
    :msg="state.questionInfo"
  />
</template>

<script>
import { reactive, computed } from "vue";
import Mycontribution from "../components/Box/MyContribution/MyContribution.vue";
import MytestPaper from "../components/Box/MyTestPaper/MyTestPaper.vue";
import Myexamine from "../components/Box/MyExamine/MyExamine.vue";
import AddQuestion from "../components/Form/AddQuestion/AddQuestion.vue";
import QuestionDetail from "../components/Box/MyExamine/QuestionDetail.vue";

export default {
  // 组件
  components: {
    Mycontribution,
    MytestPaper,
    Myexamine,
    AddQuestion,
    QuestionDetail,
  },
  // 父组件传值
  props: {
    msg: String,
  },
  emits: ["frompage-info"],
  // 钩子
  setup(props, { emit }) {
    // 双向数据绑定
    const state = reactive({
      currentMenu: "contribution", // 当前菜单
      questionDetail: false, // 问题详情对话框是否显示
      AddQuestionBox: false, // 新增问题对话框是哦福显示
      questionInfo: {}, // 问题详情信息
      menuList: [
        { id: "1", name: "我的贡献", en: "contribution" },
        { id: "2", name: "我的试卷", en: "testPaper" },
        { id: "3", name: "题目审核", en: "examine" },
      ],
    });
    // 菜单切换
    const fnChangeMenu = (val) => {
      state.currentMenu = val;
    };
    // 内容切换
    const currenContent = computed(() => {
      return "My" + state.currentMenu;
    });
    // 增加问题对话框是否显示
    const fnAddQuestionBox = (val) => {
      state.AddQuestionBox = val;
    };
    // 查看问题
    const fnViewQuestionBox = (val) => {
      if (state.questionDetail === true) return (state.questionDetail = false);
      state.questionInfo = val;
      state.questionDetail = true;
    };
    // 输出模板
    return {
      state,
      fnChangeMenu,
      currenContent,
      fnAddQuestionBox,
      fnViewQuestionBox,
    };
  },
};
</script>

<style scoped>
.administration {
  position: relative;
  z-index: 100;
}

.administration #menu {
  position: absolute;
  left: 0;
  top: 0;
  width: 160px;
  z-index: 101;
}

.m-item {
  height: 60px;
  line-height: 60px;
  cursor: pointer;
}

.administration #content {
  position: relative;
  padding-left: 180px;
  z-index: 100;
}
</style>
